.fullscreen-video{

    // hack, very necessary though (adding and removing from DOM breaks video loading in safari)
    display:none;
    body.is-locked & { display:block; }

    // ============================================================================
    //   Variables
    // ============================================================================

    $fsv-z-index: 9999;

    $fsv-color-overlay-duration-reveal: 1000ms; 
    $fsv-player-delay-reveal: 700ms; // slightly overlaps with ^
    $fsv-player-duration-reveal: 400ms; 

    $fsv-reveal-duration: 500ms;

    // ============================================================================
    //   Single
    // ============================================================================

    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba($color-ebony, 0.9);
    z-index: $fsv-z-index;

    transition: all $fsv-color-overlay-duration-reveal $bezier-blog-menu;

    // ============================================================================
    //   Child Elements
    // ============================================================================

    &__player{
      opacity:1;
      display:block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 90%;
      transform: translate( -50%, -50% );
      transform: translate3d( -50%, -50%, 0 );
      transition: all $fsv-player-duration-reveal $bezier-blog-menu $fsv-player-delay-reveal;
    }

    &__controls{
      @include clearfix();

      border-radius: 0 0 0 4px;
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height:50px;
      text-align: right;
      overflow: hidden;

      opacity: 0.5;

      transition: transform 3s eaes,
                  background-color 180ms ease,
                  opacity 180ms ease;

      html.no-touch &:hover{
        opacity: 1;
        background-color: rgba($color-parse-blue, 0.3);
      }

      a{
        text-decoration: none;
        text-align: center;
        height:50px;
        width: 50px;
        line-height: (50px - 1);
        float:left;
        display:block;
        cursor:pointer;
        color: $color-vista-white;

        transition: background-color 180ms ease;

        // &:first-child{ border-radius: 4px 0 0 4px; }
        // &:last-child{ border-radius: 0 4px 4px 0; }

        svg {
          display:block;
          margin: 0 auto;
          fill: white;
          width: 20px;
          height: 50px;
        }
        html.no-touch &:hover{ background-color: rgba($color-parse-blue, 0.6); }

      }
    }

    &__close{
      position:relative;

      &:before,
      &:after{
        content: "";
        position:absolute;
        left: 50%; top:50%;
        background: white;
        transform: rotate(45deg);
        transition: all 200ms $bezier-sweaty-elastic $fsv-player-delay-reveal;
      }

      &:before{
        width: 20px;
        margin: -2px 0 0 -10px;
        height: 4px;
      }
      &:after{
        height: 20px;
        margin: -10px 0 0 -2px;
        width: 4px;
      }

    }


    // ============================================================================
    //   States
    // ============================================================================

    &.is-hidden{
      transition: all $fsv-reveal-duration $bezier-blog-menu;
      opacity:0;

      .fullscreen-video__player{
        opacity:0;
        transform: translate( -50%, -50% ) scale(0.75);
        transform: translate3d( -50%, -50%, 0 ) scale(0.75);
        transition: all $fsv-reveal-duration $bezier-blog-menu;
      }
      .fullscreen-video__close{
        &:before{ transform: rotate(0); }
        &:after{ transform: rotate(90deg); }
      }
    }


    // ============================================================================
    //   Modifiers
    // ============================================================================

    &--green{

      .fullscreen-video__controls{
        html.no-touch &:hover{
          background-color: rgba($color-carib-green, 0.3);
        }
        a{
          html.no-touch &:hover{
            background-color: rgba($color-carib-green, 0.6);
          }
        }
      }

    }

    &--red{

      .fullscreen-video__controls{
        html.no-touch &:hover{
          background-color: rgba($color-rad-red, 0.3);
        }
        a{
          html.no-touch &:hover{
            background-color: rgba($color-rad-red, 0.6);
          }
        }
      }

    }

    &--cover{
      background-color:white;
      .fullscreen-video__player{
        transition: all $fsv-reveal-duration $bezier-blog-menu 1s;
        width: auto;
        height:auto;
        min-width:100%;
        min-height:100%;
      }
      .fullscreen-video__controls{
        transition: all 500ms ease;
         a{
          background-color: rgba($color-parse-blue, 0.6);
          html.no-touch &:hover{ background-color: rgba($color-parse-blue, 0.9); }
        }
      }
      &.is-hidden{
        opacity:0;
        transition: all $fsv-reveal-duration ease 1s;

        .fullscreen-video__player{
          opacity:0;
          transform: translate( -50%, -50% );
          transform: translate3d( -50%, -50%, 0 );
        }
        .fullscreen-video__controls{
          // transform: translate(100px, -100px) rotate(1080deg); // <- :D
          transform: translateX(100px);
        }
      }
    }


}
